<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>formDemo</title>
</head>

<body>
 <div class="layui-container">
  <div class="layui-row layui-col-space15">
   <div class="layui-col-md12">
    <form action="" class="layui-form layui-form-pane">
     <div class="layui-form-item">
      <label class="layui-form-label">名称</label>
      <div class="layui-input-block">
       <input type="text" name="title" autocomplete="off" placeholder="请输入汉字" class="layui-input" lay-verify="required">
      </div>
     </div>
     <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
       <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" class="layui-input">
      </div>
     </div>
     <div class="layui-form-item">
      <div class="layui-inline">
       <label class="layui-form-label">日期选择</label>
       <div class="layui-input-block">
        <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
       </div>
      </div>
      <div class="layui-inline">
       <label for="" class="layui-form-label">行内表单</label>
       <div class="layui-input-inline">
        <input type="text" name="number" autocomplete="off" class="layui-input">
       </div>
      </div>
     </div>
     <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
       <input type="password" name="password" class="layui-input" autocomplete="off">
      </div>
      <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
     </div>
     <div class="layui-form-item">
      <div class="layui-inline">
       <label for="" class="layui-form-label">范围</label>
       <div class="layui-input-inline" style="width:100px;">
        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
       </div>
       <div class="layui-form-mid">-</div>
       <div class="layui-input-inline" style="width:100px;">
        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
       </div>
      </div>
     </div>

     <div class="layui-form-item">
      <label class="layui-form-label">单行选择框</label>
      <div class="layui-input-block">
       <select name="interest" lay-filter="aihao" id="">
        <option value=""></option>
        <option value="1">写作</option>
        <option value="2" selected>阅读</option>
        <option value="3">游戏</option>
       </select>
      </div>
     </div>
     <div class="layui-form-item">
      <label class="layui-form-label">行内选择</label>
      <div class="layui-input-inline">
       <select name="quiz1" id="">
        <option value="1">浙江</option>
        <option value="2" selected>福建</option>
        <option value="3">江苏</option>
       </select>
      </div>
      <div class="layui-input-inline">
       <select name="quiz2" id="">
        <option value="1">杭州</option>
        <option value="2" selected>苏州</option>
        <option value="3">台州</option>
       </select>
      </div>
      <div class="layui-input-inline">
       <select name="quiz3" id="">
        <option value="1">西湖区</option>
        <option value="2" selected>余杭区</option>
        <option value="3">临安区</option>
       </select>
      </div>
     </div>
     <div class="layui-form-item" pane="">
      <label class="layui-form-label">开关-开</label>
      <div class="layui-input-block">
       <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
      </div>
     </div>

     <div class="layui-form-item" pane="">
      <label class="layui-form-label">单选</label>
      <div class="layui-input-block">
       <input type="radio" name="sex" value="男" title="男">
       <input type="radio" name="sex" value="女" title="女">
      </div>
     </div>
     <div class="layui-form-item">
      <label for="" class="layui-from-ilabel">文本域</label>
      <div class="layui-input-block">
       <textarea name="xx" id="" cols="30" rows="10" class="layui-textarea"></textarea>
      </div>
     </div>

     <div class="layui-form-item">
      <button class="layui-btn" type="submit" lay-submit lay-filter="demo2">提交保存</button>
     </div>
    </form>
   </div>
  </div>
 </div>
 <script>
  layui.use(['form', 'laydate', 'layedit'], function () {
   var form = layui.form,
    layer = layui.layer,
    layedit = layui.layedit,
    laydate = layui.laydate;
   form.render();
   laydate.render({ elem: "#date1" });

   form.on('submit(demo2)', function (data) {
    layer.msg(JSON.stringify(data.field));
    return false
   });

  });
 </script>
</body>

</html>